<!DOCTYPE html>
<html>
<head>
	<title>班组考勤明细</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0, user-scalable=no"/>
	<script src="js/flexible.js"></script>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body class="Summary">
<div id="myAttendanceDailySummary">
	<div class="title">
		<div class="titleCont">
			<div class="headPortrait">
				<img onload="imgClass(event)" :src="headImg?imgUrl+headImg:'image/icon_group_normal.png'"/>
			</div>
			<div class="text">
				<p v-text="userName"></p>
			</div>
			<div class="time">
				选择日期：<span onclick="window.location.href = 'setDate';" v-text="attendDateText"></span>
			</div>
		</div>
	</div>
	<div id="calendar">
		<ul class="dateHead">
			<li>日</li>
			<li>一</li>
			<li>二</li>
			<li>三</li>
			<li>四</li>
			<li>五</li>
			<li>六</li>
		</ul>
		<ul class="dateCont">
			<li v-for="dateNum in dateArr" :class="{active:today.dateItem==dateNum.dateItem}" @click="getDate(dateNum)" v-cloak>
				{{dateNum.n}}
				<span :class="{normal:dateNum.state==0,'abnormal':dateNum.state!=undefined?dateNum.state!=0:null}"></span>
			</li>
		</ul>
	</div>
	<div v-show="notData">
		<div class="attendanceQuantity">
			今日打卡<span v-text="attenList?attenList.length:0"></span>次<!--，工时共计<span>0</span>分钟-->
		</div>
		<ul class="attendanceRecord" v-cloak>
			<li v-for="(list,index) in attenList">
				<div class="left">
					<span v-text="list.text"></span>
					<div class="line" v-show="index!=attenList.length-1"></div>
				</div>
				<div class="right">
					<p>{{list.text}}班打卡时间 {{list.time}}</p>
					<p>
						<img src="image/dingwei.png"/>
						<span v-text="list.attenAddr"></span>
					</p>
					<div class="attendanceStatus">
						<span :class="list.NewaddrStatus" v-text="list.addrStatus?'异常':'正常'"></span>
						<span class="face" v-show="list.attenway==1">人脸图像</span>
					</div>
				</div>
			</li>
		</ul>
	</div>
</div>
<script src="js/vue.min.js"></script>
<script src="js/all.js" type="text/javascript" charset="utf-8"></script>
<script src="js/axios.min.js"></script>
<script src="js/message.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#myAttendanceDailySummary",
        data:{
            //日历
            dateArr:[],
            today:'',
            attenList:[],
            attendDate:'',
            attendDateText:'',
            notData:false,
            oDataState:{},
            userName:'',
            headImg:''
        },
        methods:{
            createCalendar:function(){//创建日历函数
                if (this.attendDate) {
                    var oDate=new Date(this.attendDate+'-01');
                    var year=oDate.getFullYear();
                    var month=oDate.getMonth();
                }else{
                    var oDate=new Date();
                    var year=oDate.getFullYear();
                    var month=oDate.getMonth();
                }

                this.today={
                    dateItem : oDate.getFullYear() +"-"+ two(oDate.getMonth()+1) +"-"+ two(oDate.getDate())
                };

                var arr = [];

                var firstdayMonth=new Date(year,month,1);
                var firstDayWeek=firstdayMonth.getDay();
                var allDay=new Array(31,28+leapYear(year),31,30,31,30,31,31,30,31,30,31);
                var dateNum = firstDayWeek+allDay[month];
                for (var i=1;i<=dateNum;i++) {
                    if (i<=allDay[month]) {
                        arr.push({
                            n:i,
                            dateItem:year+'-'+two(month+1)+'-'+two(i),
                            state:this.oDataState[year+'-'+two(month+1)+'-'+two(i)]
                        });
                    } else{
                        arr.unshift('');
                    }
                }
                this.dateArr = arr;
            },
            getDate:function(currentDate){
                this.today = {
                    dateItem : currentDate.dateItem
                };
                console.log(currentDate.dateItem)
                axios.get(url+"/getGroupAttenDayCountStatusDetailed",{
                    params:{
                        projectId:GetQueryString("projectId"),
                        groupId:GetQueryString("groupId"),
                        attendDate:currentDate.dateItem,
                        workerId:GetQueryString("workerId")
                       /* projectId:GetQueryString("projectId")||"0",
                        groupId:GetQueryString("groupId")||"10639",
                        attendDate:currentDate.dateItem,
                        workerId:GetQueryString("workerId")||"670"*/
                    },
                    headers:{"token":GetQueryString("token")}
                    //headers:{"token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpdyI6Ik1vbiBBdWcgMTQgMTU6NTQ6MDQgQ1NUIDIwMTcifQ.JyCwspmzoXXwrcHKvCwMpsUWYU_IKpmVfi-3vzUt3fYuserId:670"}
                }).then(function(data){
                    console.log(data)
                    var total = 0;
                    if (data.data.data) {
                        for (var i=0,list=data.data.data;i<list.length;i++) {
                            total += list[i].attenTime
                            var oDate = new Date(list[i].attenTime)
                            list[i].time=oDate.getHours()+":"+two(oDate.getMinutes())

                            if (list[i].addrStatus) {
                                list[i].NewaddrStatus = 'abnormal'
                            }else{
                                list[i].NewaddrStatus = 'normal'
                            }

                            if (list[i].attenStatus.indexOf('S')!=-1) {
                                list[i].text = "上"
                            } else{
                                list[i].text = "下"
                            }

                        }
                    }
                    if (data.data.data) {
                        this.attenList = data.data.data;
                        this.notData = true;
                    } else{
                        this.notData = false;
                    }

                }.bind(this))
            },
            setDate:function(date){
                this.attendDate = date;
                this.attendDateText = replaceDate("y-m",date)
                this.getDateState();
            },
            getDateState:function(){
                if (this.attendDate) {
                    this.attendDate = this.attendDate
                }else{
                    var oDate=new Date();
                    var year=oDate.getFullYear();
                    var month=oDate.getMonth();
                    var time = year+'-'+two(month+1)
                }
                axios.get(url+"/getAttendDateMsg",{
                    params:{
                        groupId:GetQueryString("groupId"),
                        month:time?time:this.attendDate,
                        workerId:GetQueryString("workerId")
                        /*groupId:GetQueryString("groupId")||"10639",
                        month:time?time:this.attendDate,
                        workerId:GetQueryString("workerId")||"670"*/
                    },
                    headers:{"token":GetQueryString("token")}
                    //headers:{"token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpdyI6IlR1ZSBBdWcgMTUgMTc6MTQ6MzAgQ1NUIDIwMTcifQ.S6k4iRxnqEKtoWT4DiSYEVchOAFy1VaivQM2nXoaORsuserId:679"}
                }).then(function(data){
                    this.oDataState = data.data.data
                    this.createCalendar();
                    this.getDate(this.today);
                }.bind(this))
            },
        },
        mounted:function(){
            this.$nextTick(function(){   // 文档加载后调用
                this.headImg = GetQueryString('headImg');
                this.attendDateText = replaceDate("y-m");
                this.getDateState();
                this.userName = GetQueryString('userName');
            });
        }
    });

    function leapYear(year) {
        var y;
        return (year%100==0?y=(year%400==0?1:0):y=(year%4==0?1:0));
    }

</script>
</body>
</html>
